<template>
  <div class="app-container">
    <h1 class="title-header">供应商审核中心</h1>
    <!-- 筛选部分 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.value"
        placeholder="搜索内容"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.importance"
        placeholder="基础信息查询"
        clearable
        style="width: 130px"
        class="filter-item"
      >
        <el-option
          v-for="item in importanceOptions"
          :key="item.value"
          :label="item.lable"
          :value="item.value"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="店铺头像">
              <span>{{ props.row.img }}</span>
            </el-form-item>
            <el-form-item label="店铺网址：">
              <span>{{ props.row.web }}</span>
            </el-form-item>
            <el-form-item label="店铺地址：">
              <span>{{ props.row.addr }}</span>
            </el-form-item>
            <el-form-item label="店铺电话：">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="供应商 ID" prop="_id" />
      <el-table-column label="供应商名字" prop="name" />
      <el-table-column label="简介" prop="note" />
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="props">
          <el-button
            size="mini"
            type="success"
            icon="el-icon-circle-check"
            @click="handlePass(props.row)"
          >通过</el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-circle-close"
            @click="handleNoFail(props.row)"
          >不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出层，不通过的表单 -->
    <el-dialog title="请输入不通过原因：" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="具体原因：" prop="content" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off" />
        </el-form-item>
        <el-form-item label="不通过项：" prop="value" :label-width="formLabelWidth">
          <el-select v-model="form.value" multiple placeholder="请选择">
            <el-option v-for="item in stoeContent" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleFilPass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllSupplier,changeStatus } from "@/api/admin";
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        value: undefined,
        importance: undefined,
        type: {},
        sort: -1
      },
      formLabelWidth: "120px",
      form: {
        content: "",
        value: []
      },
      rules: {
        content: [
          { required: true, message: "必须输入不通过理由", trigger: "blur" }
        ],
        value: [
          { required: true, message: "请输入不通过项", trigger: "change" }
        ]
      },
      stoeContent: ["名字", "地址", "网站", "联系电话", "头像", "简介"],
      dialogFormVisible: false,
      importanceOptions: [
        { lable: "供应商名", value: "name" },
        { lable: "手机号码", value: "phone" }
      ],
      tableData: [

      ],
      nowid:""
    };
  },
  created(){
    this.getList()
  },

  methods: {
    getList() {
      getAllSupplier().then(res => {
        this.tableData = res.data.filter(v => {
          return v.supplierId.status == 2;
        });
      });
    },
    handleNoFail(row) {
      this.dialogFormVisible = true;
      this.nowid=row.supplierId._id
    },
    handlePass(row) {
     const {supplierId}=row;
      changeStatus(supplierId._id,{status:3}).then(res=>{
       if (res.data.ok) {
              this.$message({
                message: '处理成功！',
                type: 'success'
              })
              this.getList()
       }

      })
    },
     handleFilPass() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let formData={}
         formData.type= this.form.value.join(",")
         formData.content= this.form.content
          changeStatus(this.nowid,{status:5,info:formData}).then(res=>{
             if (res.data.ok) {
              this.$message({
                message: '处理成功！',
                type: 'success'
              })
               this.dialogFormVisible = false;
              this.getList()
       }
          })
        }
      });
    },
    handleFilter() {
      if (importance == "phone") {
        this.listQuery.value = parseInt(this.listQuery.value);
      }
      // const { importance, value } = this.listQuery;
      // if (area) {
      //   this.listQuery.type = {
      //     area: area.join("")
      //   };
      // }
      // this.listQuery.type[importance] = title;

      // this.listQuery.page = 1;
      // this.getList();
    }
  }
};
</script>

<style  scoped>
.content {
  width: 100%;
}
.title-header {
  width: 300px;
  margin: 50px auto 100px;
  color: #409eff;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.06);
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>>
